<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    <div id="layout-topbar">
        <h:link id="logo" outcome="/dashboard.xhtml" class="ClearBoth DispBlock">
            <h:graphicImage value="#{resource['ronin-layout:images/logo.svg']}" class="ShowOnDesktop"/>
            <span class="ShowOnMobile red Fs30 FontDosisSemiBold">RONIN</span>
        </h:link>

        <!-- mobile menu open button start -->
        <a id="mobile-menu-button" class="Animated03 CursPointer ShowOnMobile"><i class="fa fa-bars"/> Menu</a>
        <!-- mobile menu open button start -->

        <span id="topbar-link-cover">
            <a href="#" class="topbar-link Animated03"><i class="fa fa-wrench"/></a>
            <a href="#" class="topbar-link Animated03"><i class="fa fa-envelope"/></a>
            <a href="#" class="topbar-link red Animated03"><i class="fa fa-bell animated infinite swing"/></a>
        </span>
        <p:inputText id="topbar-search" placeholder="Search" class="FontDosisMedium" />
        <div class="EmptyBox20 ShowOnDesktop"/>
    </div>
</ui:composition>